<template>
	<view class="page-body">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<!-- 头部导航 -->
		<view class="header">
			<view class="left_box" @click="goBack()">
				<image class="left_icon" mode="widthFix" src="@/static/images/leftMark_icon.png"></image>
			</view>
			<view class="title">{{pageTitle}}{{ total ? `(${total})` : ''}}</view>
			<view class="right_box"></view>
		</view>

		<!-- 内容 -->
		<view class="content_box">
			<view class="list_ul">
				<block v-for="(item,idx) in clueList" :key="'a_'+ idx">
					<view class="list_li" @click="goDetails(item.id, item)">
						<view class="ou_li">
							<image class="levelImg" v-if="item.intentionLevel" :src="require('@/static/images/level_'+ item.intentionLevel +'.png')"></image>
							<view class="left_box">
								<view class="info_box">
									<view class="info_name">{{item.customerName}}</view>
									<view class="info_time" >分配时间：{{item.assignTime? item.assignTime : item.createTime | dataFormat }}</view>
								</view>
								<view class="frequency">
									跟进<text>{{item.followNum || 0}}</text>次 到店<text>{{item.shopNum || 0}}</text>次
								</view>
							</view>
						</view>
						
						<view class="ou_li">
							<image class="iconImg" src="@/static/images/model_icon.png"></image>
							<view class="">{{item.intentCarModel}}/{{item.intentCarStyle}}</view>
						</view>
						<view class="ou_li last_li">
							<image class="iconImg" src="@/static/images/channel_icon.png"></image>
							<view class="">{{item.firstChannelName}}/{{item.secondChannelName}}</view>
						</view>

						<view class="manualCleaning" v-if="item.cleanProp == '人工清洗'">
							<image src="@/static/images/manualCleaning.png"></image>
						</view>

						<view class="operationBox">
							<view class="btn" @click.stop="showOperation('phone', item)">
								<image class="iconImg" src="@/static/images/tel2_icon.png"></image>打电话</view>
							<view class="btn" @click.stop="showOperation('sms', item)">
								<image class="iconImg" src="@/static/images/information2_img.png"></image>发短信</view>
							<view class="btn" @click.stop="showOperation('come_shop', item)">
								<image class="iconImg" src="@/static/images/interview2_img.png"></image>来店面谈</view>
							<view class="btn" @click.stop="showOperation('outside_shop', item)">
								<image class="iconImg" src="@/static/images/meet2_img.png"></image>店外会面</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<show-modal v-if="isShowModal" :showType="showType" :isPopup="isShowModal" :popUpContent="popUpContent"  :showModalOperation.sync="isShowModal"/>
	</view>
</template>

<script>
	import {
		getFollowList
	} from '@/service/api/api.js';
	import {
		parseTime
	} from "@/common/util.js"
	import showModal from "@/components/showModal/index.vue";
	export default {
		components: {
			showModal
		},
		data() {
			return {
				userInfo: {},
				clueList: [],
				total: 0,
				pageTitle: '',
				type: '',
				isShowModal: false,
				showType:"call",
				popUpContent: {}
			}
		},
		filters: {
			dataFormat(val) {
				return parseTime(val, '{m}-{d} {h}:{i}')
			}
		},
		onLoad(option) {
			try {
				this.userInfo = uni.getStorageSync('user_info')
				this.type = option.type || '1'
				// console.log(this.userInfo)
			} catch (e) {

			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				let data = this.getType(this.type)
				this.reqClueList(data)
			},

			reqClueList(data) {
				getFollowList({
					...data,
					userId: this.userInfo.userId,
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res.data.data.content,"----------请求的数据")
						this.clueList = res.data.data.content
						this.total = res.data.data.totalElements
					} else {

					}
				})
			},
			
			getType(n){
				let data = {}
				switch (n) {
					case '1':
							data = {
								followUps: 'phone,sms',
							}
							this.pageTitle = "电话信息"
						break;
					case '2':
						data = {
							followUps: 'come_shop',
							followPurposes: '4,8,9'
						}
						this.pageTitle = "到店接待"
						break;
					case '3':
						data = {
							followUps: 'come_shop',
							followPurposes: '6'
						}
						this.pageTitle = "试驾体验"
						
						break;
					case '4':
						data = {
							followUps: 'come_shop,phone',
							followPurposes: '10'
						}
						this.pageTitle = "下订"
						break;
					case '5':
						data = {
							followUps: 'come_shop,phone',
							followPurposes: '11'
						}
						this.pageTitle = "成交"
						break;
					case '6':
						data = {
							followUps: 'come_shop',
							followPurposes: '12'
						}
						this.pageTitle = "到店交车"
						break;
				}
						
				return data
			},
			
			//拨打电话 发短信 其他跳转
			showOperation(e, val){
				switch (e){
					case 'phone':
						this.showType='phone'
						this.popUpContent = {
							id:val.id,
							uniqueId: val.uniqueId,
							mobile: val.mobile,
							followNum: val.invalidNum || 0,
							clueStatus: val.clueStatus,
							isEdit:true
						}
						console.log(val,"this.popUpContentthis.popUpContent")
						this.isShowModal=true
						break;
					case 'sms':
						this.showType='sms'
						this.popUpContent = {
							id:val.id,
							uniqueId: val.uniqueId,
							mobile: val.mobile,
							followNum: val.invalidNum || 0,
							clueStatus: val.clueStatus,
							isEdit:true
						}
						this.isShowModal=true
						break;
					case 'come_shop':
						uni.navigateTo({
							// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数,followPurposes 目的
							url: `/pages/clue/clueFollowUp/index?uniqueId=${val.uniqueId}&followNum=${val.invalidNum || 0}&followUp=${e}&clueStatus=${val.clueStatus}`
						})
						break;
					case 'outside_shop':
						uni.navigateTo({
							// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数,followPurposes 目的
							url: `/pages/clue/clueFollowUp/index?uniqueId=${val.uniqueId}&followNum=${val.invalidNum || 0}&followUp=${e}&clueStatus=${val.clueStatus}`
						})
						break;
					default:
						break;
				}
			},

			goDetails(id, item) {
				uni.navigateTo({
					// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数,followPurposes 目的
					url: `/pages/clue/clueFollowUp/index?id=${id}&uniqueId=${item.uniqueId}&followNum=${item.invalidNum || 0}&followUp=${item.followUp}&clueStatus=${item.clueStatus}`
				})
				// uni.navigateTo({
				// 	url: `/pages/clue/clueDetails/index?id=${id}&phone=${item.mobile}&followNum=${item.followNum || 0}&tabIdx=1&clueStatus=${item.clueStatus}`
				// })
			},

			goBack() { //返回上一层
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss'
</style>
